<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
    <script type="text/javascript" src="../../../../x3dom-include.js"></script>
    <script>
        var r=0;
        var g=0;
        var b=0;
        function changeShader()
        {
            var appearance = document.getElementById('app'); 
                    
            var composedShaderOld = document.getElementById('compShader');
                    
            var composedShaderNew = document.createElement('composedShader');
            composedShaderNew.setAttribute("id", "compShader");
                            
            var shaderPartV = document.createElement('shaderPart');
            //shaderPartV.setAttribute('id', 'partV2');
            shaderPartV.setAttribute('type', 'VERTEX');
            
            var shaderV = "attribute vec3 position;\n" +
                          "uniform mat4 modelViewProjectionMatrix;\n" +
                          "\n" +
                          "void main()\n" +
                          "{\n" +
                          "    gl_Position = modelViewProjectionMatrix * vec4(position, 1.0);\n" +
                          "}\n";
            
            shaderPartV.innerHTML = shaderV;
            
            var shaderPartF = document.createElement('shaderPart');
            //shaderPartF.setAttribute('id', 'partF2');
            shaderPartF.setAttribute('type', 'FRAGMENT');
            r=(r+0.11)%1.0;
            g=(g+0.73)%1.0;
            b=(b+0.23)%1.0;
            var shaderF = "#ifdef GL_ES\n" +
                          "    precision highp float;\n" +
                          "#endif\n" +
                          "\n" +
                          "void main()\n" +
                          "{\n" +
                          "    gl_FragColor = vec4(" + r + ", " + g + ", " + b + ", 1.0);\n" +
                          "}\n";
                          
            shaderPartF.innerHTML = shaderF;
            
            composedShaderNew.appendChild(shaderPartV);
            composedShaderNew.appendChild(shaderPartF);
            
            appearance.replaceChild(composedShaderNew, composedShaderOld);
        }
    </script>
</head>
       
<body>
	<x3d id='x3d' width="800px" height="600px">
	  <scene id='theScene'>
	  </scene>
	</x3d>
<script>
    var shape = document.createElement('shape');

    var appearance = document.createElement('appearance');
    appearance.setAttribute("id", "app");

    var composedShader = document.createElement('composedShader');
    composedShader.setAttribute("id", "compShader");

    var shaderPartV = document.createElement('shaderPart');
    //shaderPartV.setAttribute('id', 'partV1');
    shaderPartV.setAttribute('type', 'VERTEX');

    var shaderV = "attribute vec3 position;\n" +
            "uniform mat4 modelViewProjectionMatrix;\n" +
            "\n" +
            "void main()\n" +
            "{\n" +
            "    gl_Position = modelViewProjectionMatrix * vec4(position, 1.0);\n" +
            "}\n";

    shaderPartV.innerHTML = shaderV;

    var shaderPartF = document.createElement('shaderPart');
    //shaderPartF.setAttribute('id', 'partF1');
    shaderPartF.setAttribute('type', 'FRAGMENT');

    var shaderF = "#ifdef GL_ES\n" +
            "    precision highp float;\n" +
            "#endif\n" +
            "\n" +
            "void main()\n" +
            "{\n" +
            "    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n" +
            "}\n";

    shaderPartF.innerHTML = shaderF;

    composedShader.appendChild(shaderPartV);
    composedShader.appendChild(shaderPartF);

    appearance.appendChild(composedShader);

    var box = document.createElement('box');

    shape.appendChild(appearance);
    shape.appendChild(box);

    document.getElementById('theScene').appendChild(shape);
</script>
<input type="button" value="change" onclick="changeShader()"/>
</body>
</html>
